<!--这里是用户管理<br/>-->

<section class="listSection">
  <div class="listNav">
    政府机构管理模块 >  环保局信息管理
  </div>

  <section class="content selectContent">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>信息查询</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 listSectionSelect" >
        <form class="form-inline" #searchForm="ngForm" (ngSubmit)="doSearch(searchForm.value, 'submit')">
          <div class="row">
            <!--<div class="form-group col-md-1 col-sm-1 col-xs-1"></div>-->
            <div class="form-group search-list">
              <label>环保局名称：</label>
              <input type="text" class="form-control" name="epaName" mdInput [(ngModel)]="epaName" placeholder="请输入名称">
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA search-btn"  type="submit">查询</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>


  <section class="content">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>基本信息</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
        <form action="" >
          <div class="box-body">
            <div class="add-box clearfix">
              <button  class="btn add-tit" data-toggle="modal" data-target="#addModal">新增</button>
            </div>
            <table border="1" cellspacing="0"  class="table text-center listTable">
              <tr class="header-tab">
               <!-- <th>用户</th>-->
                <th>环保局名称</th>
                <th>地区</th>
                <th>负责人</th>
                <th>部门</th>
                <th>联系方式</th>
                <th>操作</th>
              </tr>
              <tr *ngFor="let list of dataList">
                <!--<td>{{list.loginName}}</td>-->
                <td>{{list.epaName}}</td>
                <td>{{list.area}}--{{list.city}}</td>
                <td>{{list.principal}}</td>
                <td>{{list.department}}</td>
                <td>{{list.contactNumber}}</td>
                <td>
                  <span>
                   <img src="assets/icon/see.png" class="list-icon">
                      <a href="#" data-toggle="modal" data-target="#myModal" (click)="userMessage(list)">查看</a>
                  </span>
                  <span>
                    <img src="assets/icon/edit.png" class="list-icon">
                      <a href="#" data-toggle="modal" data-target="#updateModal" (click)="userMessage(list)">编辑</a>
                  </span>
                  <span>
                    <img src="assets/icon/delete.png" class="list-icon">
                      <a href="#" data-toggle="modal" data-target="#deleteModal" (click)="delete(list.id)">删除</a>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <app-pagination
            [totalItems]="pageInfo.totalItems"
            [currentPage]="pageInfo.currentPage"
            [pageSize]="pageInfo.pageSize"
            (onReGetPage)="setPage($event)">
          </app-pagination>

        </form>
      </div>
    </div>
  </section>

  <!-- 详情 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">查看详情</h4>
          </div>
        </div>
        <div class="modal-body">

          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
          <!--      <tr>
                  <td>用户：</td>
                  <td>{{lookInfo.loginName }}</td>
                </tr>-->
                <tr>
                  <td>环保局名称：</td>
                  <td>{{lookInfo.epaName}}</td>
                </tr>
                <tr>
                  <td>行政区：</td>
                  <td>{{lookInfo.area}}--{{lookInfo.city}}</td>
                </tr>
                <tr>
                  <td>负责人：</td>
                  <td>{{lookInfo.principal }}</td>
                </tr>
                <tr>
                  <td>部门：</td>
                  <td>{{lookInfo.department  }}</td>
                </tr>
                <tr>
                  <td>联系方式：</td>
                  <td>{{lookInfo.contactNumber}}</td>
                </tr>
                <tr>
                  <td>地址：</td>
                  <td>{{lookInfo.address }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn selectButtonOfA close-btn" role="button" data-dismiss="modal">返回</button>
        </div>
      </div>
    </div>
  </div>

  <!--添加-->
  <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" data-target=".bs-example-modal-lg">
    <div class="modal-dialog" role="document">
      <form #addFrom="ngForm" (ngSubmit)="doAdd(addFrom.value,addFrom.valid)" novalidate>
        <div class="modal-content">
          <div class="modal-header text-center" >
            <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="addModalLabel">新增</h4>
            </div>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-10 col-md-offset-1">

                <table class="table detailsTable">
          <!--        <tr>
                    <td><span class="red">*</span>用户：</td>
                    <td><select class="form-control selectStyle " style="width:70%" [(ngModel)]="adduserId" name="userId" required>
                      <option value="">请选择</option>
                      <option *ngFor="let users of userlist" [value]="users.userId">{{users.loginName}}</option>
                    </select></td>
                    <td class="prompt-box"><div [hidden]="!addFrom.form.hasError('required','userId')" class="prompt"></div></td>
                  </tr>-->
                  <tr>
                    <td><span class="red">*</span>环保局名称：</td>
                    <td><input type="text" class="form-control"  placeholder="请输入" name="epaName" [(ngModel)]="addepaName" required ></td>
                    <td class="prompt-box"><div [hidden]="!addFrom.form.hasError('required','epaName')" class="prompt"></div></td>
                  </tr>
                  <tr>
                    <td><span class="red">*</span>行政区：</td>
                    <td><select class="form-control selectStyle" style="width:70%" [(ngModel)]="addareaCode" name="areaCode" required>
                      <option value="">请选择</option>
                      <option *ngFor="let areas of arealist" [value]="areas.areaId">{{areas.area}}--{{areas.city}}</option>
                    </select></td>
                    <td class="prompt-box"><div [hidden]="!addFrom.form.hasError('required','areaCode')" class="prompt"></div></td>

                  </tr>
                  <tr>
                    <td>负责人：</td>
                    <td><input type="text" class="form-control clear-input"  placeholder="请输入" name="principal" ngModel></td>
                  </tr>
                  <tr>
                    <td>部门：</td>
                    <td><input type="text" class="form-control clear-input"  placeholder="请输入" name="department" ngModel></td>
                  </tr>
                  <tr>
                    <td>联系方式：</td>
                    <td><input type="text" class="form-control clear-input"  placeholder="请输入" name="contactNumber" ngModel></td>
                  </tr>
                  <tr>
                    <td>地址：</td>
                    <td><textarea class="form-control clear-input" rows="3" name="address" ngModel></textarea></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="modal-footer text-center">
            <button class="btn selectButtonOfA sumbit-btn" type="submit" [disabled]="!addFrom.form.valid">提交</button>
            <button class="btn selectButtonOfA close-btn" role="button" data-dismiss="modal">返回</button>

          </div>
        </div>
      </form>
    </div>
  </div>
  <!--编辑-->
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
      <form #editFrom="ngForm" (ngSubmit)="doEdit(editFrom.value,editFrom.valid)" novalidate>
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="updateModalLabel">编辑</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
         <!--       <tr>
                  <td><span class="red">*</span>用户：</td>
                  <td><select class="form-control selectStyle " style="width:70%" [(ngModel)]="lookInfo.userId" name="userId" required>
                    <option *ngFor="let users of userlist" [value]="users.userId" [selected]="users.userId==lookInfo.userName">{{users.loginName}}</option>
                  </select>
                  </td>
                  <td class="prompt-box"><div [hidden]="!editFrom.form.hasError('required','userId')" class="prompt"></div></td>
                </tr>-->
                <tr>
                  <td><span class="red">*</span>环保局名称：</td>
                  <td><input type="text" class="form-control" name="epaName" [(ngModel)]="lookInfo.epaName" required>
                    <input type="hidden" class="form-control" name="id" [(ngModel)]="lookInfo.id">
                  </td>
                  <td class="prompt-box"><div [hidden]="!editFrom.form.hasError('required','epaName')" class="prompt"></div></td>
                </tr>
                <tr>
                  <td><span class="red">*</span>行政区：</td>
                  <td><select class="form-control selectStyle " style="width:70%" [(ngModel)]="lookInfo.areaCode" name="areaCode" required>
                    <option *ngFor="let areas of arealist" [value]="areas.areaId" [selected]="areas.areaId==lookInfo.areaCode">{{areas.area}}--{{areas.city}}</option>
                  </select></td>
                  <td class="prompt-box"><div [hidden]="!editFrom.form.hasError('required','areaCode')" class="prompt"></div></td>
                </tr>
                <tr>
                  <td>负责人：</td>
                  <td><input type="text" class="form-control"  placeholder="请输入" name="principal" [(ngModel)]="lookInfo.principal"></td>
                </tr>
                <tr>
                  <td>部门：</td>
                  <td><input type="text" class="form-control"  placeholder="请输入" name="department" [(ngModel)]="lookInfo.department" ></td>
                </tr>
                <tr>
                  <td>联系方式：</td>
                  <td><input type="text" class="form-control"  placeholder="请输入" name="contactNumber" [(ngModel)]="lookInfo.contactNumber" ></td>
                </tr>
                <tr>
                  <td>地址：</td>
                  <td><textarea class="form-control" rows="3" name="address" [(ngModel)]="lookInfo.address"></textarea></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <button class="btn selectButtonOfA sumbit-btn" type="submit" [disabled]="!editFrom.form.valid">提交</button>
          <button class="btn selectButtonOfA close-btn" role="button" data-dismiss="modal">返回</button>
        </div>
      </div>
      </form>
    </div>
  </div>
  <!--删除-->
  <div class="modal fade deleteModal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" [class.remove]="isRemove">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <img src="assets/img/warn-doat.png" alt="warn">
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>您将删除这条记录</span>
            </div>
          </div>
        </div>
        <div class="modal-footer text-center">
          <button class="btn selectButtonOfA reset-btn"  role="button" (click)="deletePollut(deleteId)" data-dismiss="modal">删除</button>
          <button class="btn selectButtonOfA close-btn"  role="button" data-dismiss="modal">取消</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade deleteModal" id="error" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="errorMessage">错误信息</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1 text-center">
              <span>{{errorMessage}}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer2 text-center">
          <div class="form-group search-list-btn">
            <button  class="btn reset-btn"  data-dismiss="modal">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



